<!-- #ifdef APP || APP-PLUS || APP-NVUE -->
<template>
	<view class="content">
		<view class="content-title">
			<!-- <h3>账号密码登录</h3> -->
			<u--image :src="src" width="80px" height="80px"></u--image>
		</view>
		
		<view class="myForm">
			<u--form labelPosition="left" :model="myForm" :rules="rules" ref="uForm">
				<u-form-item label="手机号" labelWidth="80" prop="tele" borderBottom ref="item1">
					<u--input clearable v-model="myForm.tele" placeholder="请输入手机号" border="none"></u--input>
				</u-form-item>
				
				<u-form-item label="验证码" labelWidth="80" prop="code" borderBottom ref="item2">
					<view class="content-code">
						<u--input clearable v-model="myForm.code" placeholder="请输入验证码" border="none"></u--input>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
							<u-button size="normal" shape="circle" :type="codeBtn" @tap="getCode">{{tips}}</u-button>
						</view>
					</view>
				</u-form-item>
			</u--form>
			<view class="myBtnView">
				<u-button class="myBtn" type="warning" shape="circle" text="注册" @click="login"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCode,doLogin } from '@/config/api.js'
	export default {
		data() {
			return {
				src: '/static/myLogo.png',
				tips: '获取验证码',
				seconds: 60,
				codeBtn: 'success',
				myForm: {
					kind: 1,
					tele: '',
					code: ''
				},
				rules: {
					'tele': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change'],
						
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
					'code': {
						type: 'string',
						max: 6,
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			login(){
				this.$refs.uForm.validate().then(res => {
					console.log('校验通过')
					doLogin(this.myForm).then((res) =>{
						if(res.code == 200){
							uni.$u.toast('注册成功')
							this.$store.commit('setUserInfo', res.data);
							uni.$u.route({
								url: '/pages/index/index',
								type: 'reLaunch'
							});
						}
						else{
							uni.$u.toast(res.msg)
						}
					})
				}).catch(errors => {
					console.log('校验失败')
				})
				
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let flag = this.$refs.uForm.validateField('tele')
				if(!this.myForm.tele){
					return
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					// getCode(this.myForm).then((res) =>{
					// 	if(res.code == 200){
					// 		uni.$u.toast('验证码已发送');
					// 		// 通知验证码组件内部开始倒计时
					// 		this.codeBtn = 'info';
					// 		this.$refs.uCode.start();
					// 	}
					// 	else{
					// 		uni.$u.toast(res.msg)
					// 		return
					// 	}
					// }).catch((res) =>{
					// 	uni.$u.toast(res.msg)
					// 	return
					// })
					
					uniCloud.callFunction({
						name: 'hellocf',
						data: { 
							tele: this.myForm.tele,
							kind: this.myForm.kind
						}
					})
					.then(res => {
					  console.log("调用云函数，前端收到的结果 ==> ",res)
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.codeBtn = 'success';
				//uni.$u.toast('倒计时结束');
			},
			start() {
				//uni.$u.toast('倒计时开始');
			}
		}
	}
</script>


<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>


<style scoped>
	.content{
		padding: 20px;
	}
	
	.myForm{
		margin-top: 40px;
	}
	
	.content-title {
		margin-top: 40px;
		justify-items: center;
		align-items: center;
		display: block;
		margin: auto;
		width: 20%;
	}
	
	.content-code{
		display: flex;
	}
	
	.myBtnView{
		display: flex;
		justify-content: center;
		align-items: center;
		/* width: 100%; */
		margin-top: 30px;
	}
	
	.myBtn{
		width: 80% !important;
	}
</style>
<!-- #endif -->